
import React from 'react';
import { useState } from 'react';
import { useCallback } from 'react';
import { useMemo } from 'react';
import { useEffect } from 'react';
import { memo } from 'react';
import { useHistory } from 'react-router';
import sty from './sty.module.css';
import hotTitle from './constans'
import ThemeHeaderRcm from '@/components/themeHeaderRcm'
import SongCover from './child/songCover'
import { reqHotRecommends } from '@/api/recommend'
const HotRecommend = () => {
  const [recommendData, setRecommendData] = useState([]);
  const history = useHistory();
  useEffect(() => {
    reqHotRecommends(8).then(res => {
      if (res.code === 200) {
        // console.log(res.result);
        setRecommendData(res.result)
      }
    })
  }, [])
  const jumpPage = useCallback((v) => {
    history.push(`/discover/songs?albumName=${v}`)
  }, [history])
  const keywords = useMemo(() => hotTitle, [hotTitle]);

  return <div>
    <ThemeHeaderRcm
      title='热门推荐'
      keywords={keywords}
      keywordsClick={jumpPage}
    >
    </ThemeHeaderRcm>
    <div className={sty.list}>
      {
        recommendData.length ? recommendData.map(v => <SongCover key={v.id} info={v} />) : ''
      }
    </div>
  </div>
}

export default memo(HotRecommend)